<template>
<div>
    <div style="overflow: hidden;">
      <top-simple-search
        @searchFun="queryRoleUser"
      >
        <template slot="other-button">
          <el-button type="primary" @click="addNewRole" size="mini">新增</el-button>
        </template>
      </top-simple-search>
      <el-table
        :data="roleUsersList"
        stripe
        v-loading="loading"
        size="small"
        width="100%"
        height="400"
      >
        <el-table-column align="left" type="index" label="序号" width="60">
        </el-table-column>
<!--        <el-table-column align="left" prop="username" label="ID" width="80">-->
<!--          <template slot-scope="{ row }">-->
<!--            <span>{{ row.id }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column align="left" prop="description" label="用户名" >-->
<!--          <template slot-scope="{ row }">-->
<!--            <span>{{ row.username }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column align="left" prop="label" label="姓名">
          <template slot-scope="{ row }">
            <span>{{ row.alias }}</span>
          </template>
        </el-table-column>
		<el-table-column align="left" prop="label" label="工号">
          <template slot-scope="{ row }">
            <span>{{ row.identity }}</span>
          </template>
        </el-table-column>
<!--        <el-table-column align="left" prop="dept_name" label="部门" min-width="120" show-tooltip-when-overflow>-->
<!--        </el-table-column>-->
        <el-table-column align="left" fixed="right" label="操作" width="80">
          <template slot-scope="{ row }">
            <delete-button @click="deleteRoleUser(row.id)"></delete-button>
          </template>
        </el-table-column>
      </el-table>
<!--      <pagination-->
<!--        v-show="roleUserPage.total > 0"-->
<!--        :total="roleUserPage.total"-->
<!--        :page.sync="roleUserPage.page"-->
<!--        :limit.sync="roleUserPage.per_page"-->
<!--        @pagination="getRoleUsersList"-->
<!--      />-->
    </div>
    <add-user-dialog
      :visible.sync="searchRoleUsers"
      :id="id"
      @reloadList="getRoleUsersList"
    ></add-user-dialog>
</div>
</template>

<script>
import qs from "qs";
import AddUserDialog from "./addUserDialog";
import eventBus from "@/utils/eventBus";
export default {
  name:"GroupsUserList",
  components: {AddUserDialog },
  props: {
    id: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      roleUserPage: {
        count: 0,
        page: 1,
        page_num: 10,
        total: 0,
        per_page: 10
      },
      roleUsersList: [],
      loading: false,
      searchRoleUsers: false
    };
  },
  computed:{
    api(){
      const api = require(`@/api/addressBook/group/index`);
      return api.default
    }
  },
  created() {
    this.getRoleUsersList();
  },
  methods: {

    deptFormatter(row){
      if(row.user_dept_info_list){
        return row.user_dept_info_list.map(item=>{
          return item.name
        }).join(",")
      }else{
        return ""
      }
    },
    getRoleUsersList() {
      this.loading = true;
      // this.roleUsersVisible = true;
      this.api
        .bookaddressGroupsUsers(this.id)
        .then(res => {
          this.roleUsersList = res.data;
          // this.roleUserPage.page = res.data.page;
          // this.roleUserPage.per_page = res.data.page;
          this.loading = false;
        });
    },
    addNewRole() {
      this.searchRoleUsers = true;
    },
    queryRoleUser(queryRole) {
      this.api
        .getRoleUser(
          this.id,
          qs.stringify({
            page: this.roleUserPage.page,
            per_page: this.roleUserPage.per_page,
            search_value: queryRole
          })
        )
        .then(res => {
          if (res.data.code === 0) {
            this.roleUsersList = res.data.value;
          }
        });
    },
    deleteRoleUser(dedId) {
      this.$confirm("删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.api.bookaddressGroupsDelete( {user:dedId,group:this.id}).then(res => {
          if (res.data.code === 0) {
            this.msgSuccess("删除成功!");
            this.getRoleUsersList();
            eventBus.$emit("reloadGroupsList")
          }
        });
      });
    }
  }
};
</script>
